<template>
  <div>
    <main id="wrapper" :style="{'background':colors[skinIndex].bgColor}">
      <div class="count" :style="{'color':colors[skinIndex].color}">{{ countStr }}</div>
      <div class="console">
        <div class="fns">
          <div class="btns">
            <div class="btn-box inline" @click="$router.back()">
              <div class="round-btn but clickable"></div>
              <h3 class="label">Config</h3>
            </div>
            <div class="btn-box inline" @click="onReset">
              <div class="round-btn full-blue but clickable"></div>
              <h3 class="label">Reset</h3>
            </div>
            <div class="btn-box inline" @click="isStop = true" v-if="!isStop">
              <div class="round-btn full-red but clickable"></div>
              <h3 class="label">Stop</h3>
            </div>
            <div class="btn-box inline" @click="isStop = false" v-if="isStop">
              <div class="round-btn full-green but clickable"></div>
              <h3 class="label">Play</h3>
            </div>
          </div>
          <ul class="skins">
            <li
              @click.stop="skinIndex=index"
              v-for="(item,index) in colors"
              :key="index"
              :style="{'background':item.bgColor,'borderColor':skinIndex==index?item.color:'transparent'}"
            ></li>
          </ul>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ipcRenderer } from "electron";
export default {
  name: "downcount-page",
  data() {
    return {
      skinIndex: 0,
      time: 60 * 3,
      isStop: false,
      colors: [
        {
          bgColor: "#000",
          color: "#fff"
        },
        {
          bgColor: "#fff",
          color: "#333"
        },
        {
          bgColor: "#e24020",
          color: "#fff"
        },
        {
          bgColor: "#d230f0",
          color: "#fff"
        },
        {
          bgColor: "#6b3",
          color: "#fff"
        },
        {
          bgColor: "#dd5",
          color: "#333"
        },
        {
          bgColor: "#57d",
          color: "#fff"
        },
        {
          bgColor: `url(${require("../assets/wood.jpg")})`,
          color: "#333"
        }
      ]
    };
  },
  created() {
    const { count } = this.$route.query;
    this.skinIndex = localStorage.getItem("skinIndex") || 0;
    this.time = 60 * count;
    this.downcount();
  },
  watch: {
    skinIndex(v) {
      localStorage.setItem("skinIndex", v);
    },
    isStop(v) {
      console.log(v);
      if (v) {
        clearInterval(this.timer);
      } else {
        this.downcount();
      }
    }
  },
  computed: {
    countStr() {
      let str = "";
      let d = ~~(this.time / 60);
      let s = this.time % 60;
      str = (d < 10 ? "0" + d : d) + ":" + ("00" + s).slice(-2);
      if (this.time <= 0) {
        this.onIpcInvoke();
        clearInterval(this.timer);
        str = "00:00";
      }
      return str;
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    async onIpcInvoke() {
      let res = await ipcRenderer.invoke("work-notification");
      console.log(res);
      if(res == "reset"){
        setTimeout(() => {
            this.onReset();
        }, 1000)
      }
    },
    onReset() {
      const { count } = this.$route.query;
      this.time = 60 * count;
      this.downcount();
    },
    downcount() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.time--;
      }, 1000);
    },
    open(link) {
      this.$electron.shell.openExternal(link);
    }
  }
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "VT323";
  src: url("../assets/VT323-Regular.ttf");
}
@font-face {
  font-family: "Alfa Slab One";
  src: url("../assets/AlfaSlabOne-Regular.ttf");
}
@font-face {
  font-family: "Oswald";
  src: url("../assets/Oswald-Regular.ttf");
}
.skins {
  list-style: none;
  display: flex;
  align-items: center;
  li {
    list-style: none;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: 2px solid transparent;
    margin-right: 10px;
    cursor: pointer;
    box-sizing: border-box;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
    &.active {
      border: 2px solid #fff;
    }
  }
}
.console {
  height: 80px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  &:hover {
    .fns {
      transform: translateY(0%);
    }
  }
  .fns {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    transition: 0.35s all;
    transform: translateY(100%);
    .btns {
      margin-right: auto;
      display: flex;
      align-items: center;
      height: 100%;
      flex: 1;
    }
    .label {
      color: #222;
      font-family: "Oswald", Arial, sans;
      font-size: 0.7em;
      margin-top: 5px;
      text-align: center;
    }
    .btn-box {
      width: 50px;
      position: relative;
    }
    .round-btn {
      width: 16px;
      height: 16px;
      position: relative;
      background-color: rgb(252, 252, 59);
      border-radius: 100%;
      border: 1px solid rgb(94, 92, 92);
      box-shadow: 0px 2px 3px rgb(143, 143, 143);
      margin: auto;
      top: -5px;
    }
    .full-red {
      background-color: #fc0102;
    }
    .full-green {
      background-color: #81fc2f;
    }
    .full-blue {
      background-color: rgb(94, 94, 248);
    }

    .round-btn:active {
      box-shadow: 0 1px 1px #292929;
      top: -4px;
    }

    .clickable {
      pointer-events: auto;
      cursor: pointer;
    }
  }
}

#wrapper {
  font-family: "Source Sans Pro", sans-serif;
  width: 100%;
  height: 100vh;
  background-color: #000;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
.count {
  font-size: 320px;
  color: #fff;
  font-family: monospace;
  // font-family: "VT323";
  // font-weight: normal;
  font-weight: bold;
}
</style>
